<template>

<el-dialog
        :model-value="dialogVisible"
        :width="500"
        :align-center="true"
        @close="cancel"
    >
    <template #header="{ titleId, titleClass }">
            <div :id="titleId" :class="titleClass">
                {{ props.title }}
            </div>
    </template>

    <div class="data__input">
              
              <el-form  :rules="rules" :model="data_obj" ref="formRef">
                <el-form-item label="有效期" class="label"   prop="range_date">
                      <el-date-picker
                        v-model="data_obj.range_date"
                        type="datetimerange"
                        range-separator="到"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                       format="YYYY-MM-DD HH:mm:ss"
                       value-format="YYYY-MM-DD HH:mm:ss"
                />
                  </el-form-item>


                  <el-form-item label="总点数" class="label"  prop="total">
                      <el-input placeholder="请输入"  v-model="data_obj.total"> </el-input>
                  </el-form-item>

                  <el-form-item label="任务数" class="label"   prop="task_num">
                      <el-input placeholder="请输入任务数"  v-model="data_obj.task_num"> </el-input>
                  </el-form-item>

                  <el-form-item label="优先级" class="label"   prop="priority">
                      <el-input placeholder="请输入"  v-model="data_obj.priority"> </el-input>
                  </el-form-item>

                  <el-form-item label="会员等级" class="label"   prop="grade">
                      <el-input placeholder="请输入"  v-model="data_obj.grade"> </el-input>
                  </el-form-item>


                  
                  

                  <el-form-item class="label">
                    <div class="dialog__bottom">
                        <div>
                            <el-button plain @click="cancel">取消</el-button>
                            <el-button type="primary" plain @click="confirm">提交</el-button>
                        </div>
                    </div>
                  </el-form-item>
              
          </el-form>
              
          </div>

</el-dialog>

</template>

<script setup>
import { ref, onMounted, nextTick, watch, watchEffect, reactive } from 'vue'

const props = defineProps(['visible', "title", "instance", "click_oprate"])
const emit = defineEmits(['cancel', 'confirm'])
const formRef = ref(null);
const dialogVisible = ref(props.visible)
watch(() => props.visible, (value) => value && (dialogVisible.value = true))

const data_obj = ref(props.instance)
watchEffect(() => data_obj.value = props.instance)


const rules = {
    name:[
    { required: true, message: "请输入名字", trigger: 'blur' },
    ],
    
}

onMounted(()=>{
    
})


function confirm(){
    formRef.value.validate((valid) => {
    if (valid) {
      // 提交表单逻辑
      emit('confirm', data_obj.value)
      dialogVisible.value = false
      data_obj.value = {}
    } else {
      return false;
    }
  });
}

function cancel(){
    emit('cancel')
    dialogVisible.value = false
    data_obj.value = {}
}


onMounted(()=>{
    
})

</script>

<style lang="scss">
.data__input{
    padding: 0 20px 0px 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    
    .el-form{
        .el-form-item{
            .el-form-item__label{
                width: 30%;
            }
        }
    }
    
}
.dialog__bottom{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
}

</style>









